<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${article.title}"></title>
    <link href="/common/icon2.png" type="image/png" rel="shortcut icon">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/common/article.css">
    <link rel="stylesheet" href="/highlight/styles/dracula.css">
</head>
<body>
<div class="layui-container content-container">
    <div class="content" th:utext="${article.content}"></div>
</div>
<div style="display: none" id="titles">
    <div class="title-container">
        <a th:each="header:${headers}" th:text="${header.title}" th:href="${'#'+header.id}" th:data-title="${header.title}"
           class="layui-elip" th:classappend="${'lv'+header.level}"></a>
    </div>
</div>
<script src="/highlight/highlight.min.js"></script>
<script src="/layui/layui.js"></script>
<script>
    hljs.highlightAll();
    document.addEventListener('DOMContentLoaded', function (event) {
        document.querySelectorAll('div.cnblogs_Highlighter pre').forEach(function (block) {
            hljs.highlightBlock(block);
        });
        document.querySelectorAll('div.cnblogs_code pre').forEach(function (block) {
            hljs.highlightBlock(block);
        });
    });
    layui.use(['layer', 'util', 'jquery'], function () {
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.jquery;

        var device = layui.device();
        if (!device.mobile) {
            showNavDialog(layer);
        }

        util.fixbar({
            bar1: '&#xe60a;'
            , bgcolor: 'rgba(159,159,159,.5)'
            , click: function (type) {
                if (type === 'bar1') {
                    showNavDialog(layer);
                }
            }
        });


        var tipIndex;
        var $body = $("body");
        $body.on("mouseenter", "a[data-title]", function () {
            var that = this;
            var title = $(that).data("title").substring(1);
            tipIndex = layer.tips(title, that, {
                tips: [1, '#222222']
            });
        });
        $body.on("mouseleave", "a[data-title]", function () {
            layer.close(tipIndex);
        });
    })

    function showNavDialog(layer) {
        layer.open({
            title: '文章目录'
            , shade: 0
            , btn: []
            , moveOut: true
            , maxWidth: 300
            , maxHeight: 600
            , offset: ['15%', 'calc(100% - 350px)']
            , content: layui.$("#titles").html()
        });
    }

</script>
</body>
</html>